<template>
    <div class="shop">
        <header>
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="(item,index) in imgs" :key="index" >
                        <img :src="item" alt="">
                    </div>
                </div>
                <div class="swiper-pagination"></div>
            </div>
        </header>
        <main>
                
        </main>
    </div>
</template>

<script>
import Swiper from 'swiper'
import 'swiper/css/swiper.css'

export default {
    data() {
        return {
            imgs:[
                'https://img.ddky.com/c/cms/temp/20200930/1601451774399_720_230.jpg',
                'https://img.ddky.com/c/cms/temp/20201010/1602309660975_720_230.jpg',
                'https://img.ddky.com/c/cms/temp/20201012/1602466582934_720_230.jpg',
                'https://img.ddky.com/c/cms/temp/20201010/1602313757864_720_230.jpg',
                'https://img.ddky.com/c/cms/temp/20201010/1602306722020_720_230.jpg',
                'https://img.ddky.com/c/cms/temp/20201010/1602319626466_720_230.jpg'
            ]
        }
    },
    mounted() {
        new Swiper('.swiper-container',{
            autoplay:true,
            loop:true,
            pagination:{
                el:'.swiper-pagination'
            }
        })
    }
}
</script>

<style lang="scss">
.shop{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    header{
        height: 150px;
        margin: 0 10px;
        img{
            height: 150px;
            width: 100%;
            border-radius: 10px;
        }
    }
    main{
        flex: 1;
    }
}
</style>